<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/javascript; charset=UTF-8" pageEncoding="UTF-8"%>

tactile.logger.setLevel(tactile.logger.level.warn);

var EventManager = tactile.EventManager;

var cat1;	    		    		    		    
var cat2;
var cat3;
var cat4;
var cat5;	    		    		    		    
var cat6;
var cat7;
var cat8;

var custom = {

    isitemselected: false,
    subtitlemoved: false,
    root: undefined,	
	loadingview: undefined,
	contentview: undefined, 		
	backmenu: undefined,
	menu: undefined,
	menuhome: undefined,
	menutech: undefined,	
	content: undefined,
	mainview: undefined,
	techview: undefined,
	detailcontent: undefined,		
	nav: undefined,
	navanim: undefined,
	viewnav: undefined,			
	selectedmenu: undefined, 
	pullview: undefined,
	releaseview: undefined,
	isreleased: false,	
	titleanim: undefined,
	newsanim: undefined,
	temp: undefined,
	slideview: undefined,
	index: 0,
	subtitle: undefined,
	catalogue: undefined,

	init: function() {
		custom.initEventManager();
	}, 
	
	initEventManager: function() {				
		custom.root = tactile.page.getComponent("root");		
					
		custom.contentview = tactile.page.getComponent("view-content");
		custom.loadingview = tactile.page.getComponent("view-desc");		
				
		custom.backmenu = tactile.page.getComponent("back");		
		custom.menu = tactile.page.getComponent("menu");
		custom.content = tactile.page.getComponent("content");
		custom.mainview = tactile.page.getComponent("main-view");
		custom.techview = tactile.page.getComponent("tech-view");
		custom.detailcontent = tactile.page.getComponent("detail-content");	
		
		custom.nav = tactile.page.getComponent("nav");
		custom.viewnav = tactile.page.getComponent("view-nav");
		
		custom.menuhome = tactile.page.getComponent("home");
		custom.menutech = tactile.page.getComponent("tech");
		
		custom.pullview = tactile.page.getComponent("pull-view");
		custom.releaseview = tactile.page.getComponent("release-view");
		
		custom.temp = tactile.page.getComponent("temp");
		custom.slideview = tactile.page.getComponent("slide-nav");
		
		custom.navanim = new tactile.effects.Slide(custom.nav, {duration:750, transition:tactile.Enum.Transitions.easeIn});		
	
	   	cat1 = document.getElementById("cat0").value;	    		    		    		    
	   	cat2 = document.getElementById("cat1").value;
	   	cat3 = document.getElementById("cat2").value;
	   	cat4 = document.getElementById("cat3").value;
	   	cat5 = document.getElementById("cat4").value;	    		    		    		    
	   	cat6 = document.getElementById("cat5").value;
	   	cat7 = document.getElementById("cat6").value;
	   	cat8 = document.getElementById("cat7").value;	
	   	
	   	custom.selectedmenu = document.getElementById("selectedMenu").value;	   	
	   	custom.swapMenu(custom.selectedmenu);
	   	
	   	EventManager.addListener("home", "click", function() { custom.selectMenu('home'); });	
	   	EventManager.addListener("tech", "click", function() { custom.selectMenu('tech'); });	   	    		
		
		<c:forEach begin="1" end="10" varStatus="stat1">
    		EventManager.addListener(cat1 + ${stat1.index}, "click", function() { custom.selectNews(cat1 + ${stat1.index}); });
    		
    		custom.stat1${stat1.index} = tactile.page.getComponent(cat1 + ${stat1.index});
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat2">
    		EventManager.addListener(cat2 + ${stat2.index}, "click", function() { custom.selectNews(cat2 + ${stat2.index}); });
    		
    		custom.stat2${stat2.index} = tactile.page.getComponent(cat2 + ${stat2.index});
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat3">
    		EventManager.addListener(cat3 + ${stat3.index}, "click", function() { custom.selectNews(cat3 + ${stat3.index}); });
    		
    		custom.stat3${stat3.index} = tactile.page.getComponent(cat3 + ${stat3.index});
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat4">
    		EventManager.addListener(cat4 + ${stat4.index}, "click", function() { custom.selectNews(cat4 + ${stat4.index}); });
    		
    		custom.stat4${stat4.index} = tactile.page.getComponent(cat4 + ${stat4.index});
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat5">
    		EventManager.addListener(cat5 + ${stat5.index}, "click", function() { custom.selectNews(cat5 + ${stat5.index}); });
    		
    		custom.stat5${stat5.index} = tactile.page.getComponent(cat5 + ${stat5.index});    		    		
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat6">
    		EventManager.addListener(cat6 + ${stat6.index}, "click", function() { custom.selectNews(cat6 + ${stat6.index}); });
    		
    		custom.stat6${stat6.index} = tactile.page.getComponent(cat6 + ${stat6.index});
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat7">
    		EventManager.addListener(cat7 + ${stat7.index}, "click", function() { custom.selectNews(cat7 + ${stat7.index}); });
    		
    		custom.stat7${stat7.index} = tactile.page.getComponent(cat7 + ${stat7.index});
    	</c:forEach>
    	
    	<c:forEach begin="1" end="10" varStatus="stat8">
    		EventManager.addListener(cat8 + ${stat8.index}, "click", function() { custom.selectNews(cat8 + ${stat8.index}); });
    		
    		custom.stat8${stat8.index} = tactile.page.getComponent(cat8 + ${stat8.index});
    	</c:forEach>
    	
    	<c:forEach begin="0" end="3" varStatus="subTitleStat">
    		EventManager.addListener("homesubtitle" + ${subTitleStat.index}, "click", function() { custom.selectSubTitle(${subTitleStat.index}); });
    		
    		custom.homeloader${subTitleStat.index} = tactile.page.getComponent("homeloader" + ${subTitleStat.index});	
    		custom.homesubtitle${subTitleStat.index} = tactile.page.getComponent("homesubtitle" + ${subTitleStat.index});	
    		custom.homecatalogue${subTitleStat.index} = tactile.page.getComponent("homecatalogue" + ${subTitleStat.index});
			custom.homecatalogueview${subTitleStat.index} = tactile.page.getComponent("homecatalogueview" + ${subTitleStat.index});   
    	</c:forEach>    
    	
    	<c:forEach begin="0" end="3" varStatus="subTitleTechStat">
    		EventManager.addListener("techsubtitle" + ${subTitleTechStat.index}, "click", function() { custom.selectSubTitle(${subTitleTechStat.index}); });
    		
    		custom.techloader${subTitleTechStat.index} = tactile.page.getComponent("techloader" + ${subTitleTechStat.index});	
    		custom.techsubtitle${subTitleTechStat.index} = tactile.page.getComponent("techsubtitle" + ${subTitleTechStat.index});	
    		custom.techcatalogue${subTitleTechStat.index} = tactile.page.getComponent("techcatalogue" + ${subTitleTechStat.index});
			custom.techcatalogueview${subTitleTechStat.index} = tactile.page.getComponent("techcatalogueview" + ${subTitleTechStat.index});						   
    	</c:forEach>   
    	    	 	    	      	 					 		
		EventManager.addListener("view-content", "click", function() { 
			var height = custom.root.getInnerBox().height;
		
			if(custom.subtitlemoved) {			
				custom.navanim.move({slidedir: tactile.effects.Direction.vertical, to: height - 20});			
				custom.subtitlemoved = false;
			}				
		 });
		 
		EventManager.addListener("back", "click", function() { custom.back(); });		
		
		custom.loader = new tactile.ContentLoader();
		custom.loader.onstart.subscribe(custom.showLoadingView);
		custom.loader.onsuccess.subscribe(custom.displayContent);
		custom.loader.onerror.subscribe(custom.handleError);
		
		custom.newsloader = new tactile.ContentLoader();
		custom.newsloader.onstart.subscribe(custom.showReloadView);
		custom.newsloader.onsuccess.subscribe(custom.reloadNews);
		custom.newsloader.onerror.subscribe(custom.handleReloadError);
		
		custom.mainscroller = custom.mainview.scroller;		
		custom.mainscroller.onscroll.subscribe(custom.scrollmove);		
		custom.mainscroller.onbouncestart.subscribe(custom.scrollbouncestart);		
		
		custom.techscroller = custom.techview.scroller;		
		custom.techscroller.onscroll.subscribe(custom.scrollmove);		
		custom.techscroller.onbouncestart.subscribe(custom.scrollbouncestart);
	},
		
	scrollmove: function(e) {				
		var pos = e.offsetY;
		
		if(!custom.isreleased) {			
				
			if((15 < pos) && (pos < 35)) {
				custom.pullview.show();
			}
			
			if(35 <= pos) {
				custom.pullview.hide();	
				custom.releaseview.show();
				custom.isreleased = true;
			}	
			
			if(pos <= 15) { 
				custom.pullview.hide();
			}					
		} else {
			if(pos == 0) {
				custom.isreleased = false;
				
				custom.newsloader.load({url: "/reload?menu=" + custom.selectedmenu});
			}					
		}						
	},		
	
	scrollbouncestart: function(e) {		
		
		custom.pullview.hide();					
		custom.releaseview.hide();						
	},			
	
	selectNews: function(id) {	
	
	    if(!custom.isitemselected) {
	    	custom.content.swapClass('content', 'detail-content');				   
		    		
			custom.content.effect.hide();				
			custom.menu.effect.move({slidedir: tactile.effects.Direction.vertical, to: 15});																
						
			custom.temp.show();						
							
			if(cat1 != undefined && custom.startsWith(id, cat1)) {	  	
				custom.subtitle = custom.homesubtitle0;																							
			    custom.catalogue = custom.homecatalogue0; 																													
				
				custom.index = 0;
			} else if(cat2 != undefined && custom.startsWith(id, cat2)) {
				custom.subtitle = custom.homesubtitle1;
			    custom.catalogue = custom.homecatalogue1;
			    
			    custom.index = 1;				
			} else if(cat3 != undefined && custom.startsWith(id, cat3)) {
				custom.subtitle = custom.homesubtitle2;
			    custom.catalogue = custom.homecatalogue2;
				
				custom.index = 2;
			} else if(cat4 != undefined && custom.startsWith(id, cat4)) {
				custom.subtitle = custom.homesubtitle3;
			    custom.catalogue = custom.homecatalogue3;
				
				custom.index = 3;
			} else if(cat5 != undefined && custom.startsWith(id, cat5)) {				
			
				custom.subtitle = custom.techsubtitle0;																							
			    custom.catalogue = custom.techcatalogue0; 																													
				
				custom.index = 0;
			} else if(cat6 != undefined && custom.startsWith(id, cat6)) {
				custom.subtitle = custom.techsubtitle1;																							
			    custom.catalogue = custom.techcatalogue1; 																													
				
				custom.index = 1;
			} else if(cat7 != undefined && custom.startsWith(id, cat7)) {
				custom.subtitle = custom.techsubtitle2;																							
			    custom.catalogue = custom.techcatalogue2; 																													
				
				custom.index = 2;
			} else if(cat8 != undefined && custom.startsWith(id, cat8)) {
				custom.subtitle = custom.techsubtitle3;																							
			    custom.catalogue = custom.techcatalogue3; 																													
				
				custom.index = 3;
			}	
			
			if(custom.selectedmenu == 'home') {
				custom.mainview.remove(custom.subtitle);				
				custom.mainview.remove(custom.catalogue);
			} else if(custom.selectedmenu == 'tech') {
				custom.techview.remove(custom.subtitle);				
				custom.techview.remove(custom.catalogue);
			}											
						
			custom.slideview.append(custom.subtitle);
			custom.slideview.append(custom.catalogue);					
			
			var position = custom.slideview.getInnerBox().height;
			
			custom.titleanim = new tactile.effects.Slide(custom.subtitle, {duration:750, transition:tactile.Enum.Transitions.easeIn});			
			custom.newsanim = new tactile.effects.Slide(custom.catalogue, {duration:750, transition:tactile.Enum.Transitions.easeIn});						
					
			custom.titleanim.move({slidedir: tactile.effects.Direction.vertical, to: position - 20});															
			custom.newsanim.move({slidedir: tactile.effects.Direction.vertical, to: position});
						
			window.setTimeout(function() {
				custom.temp.hide();					
				custom.nav.show();
				
				var height = custom.root.getInnerBox().height;
				document.getElementById("nav").style.top = (height - 20) + "px";
				
				custom.slideview.remove(custom.subtitle);
				custom.slideview.remove(custom.catalogue);
				
				custom.viewnav.append(custom.subtitle);
				custom.viewnav.append(custom.catalogue);								
				
				custom.titleanim = new tactile.effects.Slide(custom.subtitle, {duration:10, transition:tactile.Enum.Transitions.easeIn});			
				custom.newsanim = new tactile.effects.Slide(custom.catalogue, {duration:10, transition:tactile.Enum.Transitions.easeIn});	
				
				custom.titleanim.move({slidedir: tactile.effects.Direction.vertical, to: 0});															
				custom.newsanim.move({slidedir: tactile.effects.Direction.vertical, to: 20});				
																																																																															
				custom.loader.load({url: "/getDetail?id=" + id});
			}, 750);									
			
			custom.backmenu.effect.show();																													
		    
	    	custom.isitemselected = true;
	    } else {
	    	custom.loader.load({url: "/getDetail?id=" + id});
	    }	
	    	    	
		        	        															
	}, 	
	
	selectSubTitle: function(id) {	
		var height = custom.root.getInnerBox().height;
			
		if(!custom.subtitlemoved) {																	
			custom.navanim.move({slidedir: tactile.effects.Direction.vertical, to: height - 210});					
		
			custom.subtitlemoved = true;			
		} else {			
			custom.navanim.move({slidedir: tactile.effects.Direction.vertical, to: height - 20});
			
			custom.subtitlemoved = false;
		}
	},		
	
	selectMenu: function(menu) {				
		custom.selectedmenu = menu;
		
		custom.newsloader.load({url: "/reload?menu=" + custom.selectedmenu});						
	},
	
	swapMenu: function(menu) {
		if(menu == 'home') {
			custom.menuhome.replaceClass('menunotselected', 'menuselected');
			custom.menutech.replaceClass('menuselected', 'menunotselected');						
		} else if(menu == 'tech') {
			custom.menutech.replaceClass('menunotselected', 'menuselected');
			custom.menuhome.replaceClass('menuselected', 'menunotselected');			
		}
	},
	
	back: function() {		
		custom.content.swapClass('detail-content', 'content');																
		
		custom.contentview.hide();
		custom.detailcontent.hide();	
		custom.nav.hide();
		
		custom.menu.effect.move({slidedir: tactile.effects.Direction.vertical, to: 40});
		custom.content.effect.show();
		
		custom.viewnav.remove(custom.subtitle);				
		custom.viewnav.remove(custom.catalogue);
		
		var position = 0;
		
		if(custom.selectedmenu == 'home') {
			custom.mainview.append(custom.subtitle);				
			custom.mainview.append(custom.catalogue);
	
			position = custom.mainview.getInnerBox().height;
		} else if(custom.selectedmenu == 'tech') {
			custom.techview.append(custom.subtitle);				
			custom.techview.append(custom.catalogue);
	
			position = custom.techview.getInnerBox().height;
		}			
		
		custom.titleanim = new tactile.effects.Slide(custom.subtitle, {duration:750, transition:tactile.Enum.Transitions.easeIn});			
		custom.newsanim = new tactile.effects.Slide(custom.catalogue, {duration:750, transition:tactile.Enum.Transitions.easeIn});	
		
		var space = (custom.index + 1) * 4;
		var postitle = (custom.index*20) + (custom.index*190) + space;
		var posnews = ((custom.index + 1)*20) + (custom.index*190) + space;	
				
		custom.titleanim.move({slidedir: tactile.effects.Direction.vertical, to: postitle});																			
		custom.newsanim.move({slidedir: tactile.effects.Direction.vertical, to: posnews});																	
	
		custom.backmenu.effect.hide();
		
		custom.isitemselected = false;
	}, 
		
	startsWith: function (str, prefix){
	    return str.indexOf(prefix) == 0;
	}, 
	
	showLoadingView: function () {	    
	    custom.detailcontent.show();
		custom.loadingview.show();
	}, 
	
	displayContent: function(e) {	
	
	    // set timeout is just to simulate asynch call otherwise will be to fast 	
	    setTimeout(function() {
	    	custom.loadingview.hide();	
	
			var loadedcontent = custom.loader.getResponseText();
			var json = jQuery.parseJSON(loadedcontent);
			
			var title = json.title;
			var content = json.content;
			var image = json.image;
			
			var titleHTML = "<table class='title'><tr><td>" + title + "</td></tr></table><br><br>";
			var imageHTML = "<table class='title'><tr><td><img src='" + image + "'/></td></tr></table><br><br>";
			var contentHTML = "<table><tr><td>" + content + "</td></tr></table>";
			
			custom.contentview.show();
			
			custom.contentview.elem.innerHTML = titleHTML + imageHTML + contentHTML;
	    }, 1000);    		
			
	},
	
	handleError : function(e) {
		// notify with an alert about the error
		alert("Error loading the content: " + e.url + ", message: " + e.status + " " + e.message);
		// hide the loading view
		custom.loadingview.hide();
	},
	
	showReloadView: function() {
		custom.displayReloadLoader();	
	}, 	
	
	displayReloadLoader: function() {
		custom.swapMenu(custom.selectedmenu);
				
		if(custom.selectedmenu == 'home') {
			custom.techview.hide();
			custom.mainview.show();			
			
			custom.homeloader0.show();
			custom.homeloader1.show();
			custom.homeloader2.show();
			custom.homeloader3.show();
		} else if(custom.selectedmenu == 'tech') {
			custom.mainview.hide();
			custom.techview.show();
		
			custom.techloader0.show();
			custom.techloader1.show();
			custom.techloader2.show();
			custom.techloader3.show();
		}
	}, 
	
	hideReloadLoader: function() {
		if(custom.selectedmenu == 'home') {
			custom.homeloader0.hide();
			custom.homeloader1.hide();
			custom.homeloader2.hide();
			custom.homeloader3.hide();
		} else if(custom.selectedmenu == 'tech') {
			custom.techloader0.hide();
			custom.techloader1.hide();
			custom.techloader2.hide();
			custom.techloader3.hide();
		}
	}, 
	
	reloadNews: function(e) {
		// set timeout is just to simulate asynch call otherwise will be to fast 
		setTimeout(function(){
			custom.hideReloadLoader();						
			
			if(custom.selectedmenu == 'home') {
				<c:forEach begin="0" end="3" varStatus="homeStat">
					<c:forEach begin="1" end="10" varStatus="itemStat">
						custom.homecatalogueview${homeStat.index}.remove(custom.stat${homeStat.index + 1}${itemStat.index});		 								
					</c:forEach>
				</c:forEach>	
			
				<c:forEach begin="0" end="3" varStatus="homeStat">
					<c:forEach begin="1" end="10" varStatus="itemStat">						 	
						var loadedItem${homeStat.index + 1}${itemStat.index}  = tactile.FlexItem.cast(custom.newsloader.getComponent(cat${homeStat.index + 1} + ${itemStat.index}));												
						
						custom.homecatalogueview${homeStat.index}.append(loadedItem${homeStat.index + 1}${itemStat.index});
					</c:forEach>
				</c:forEach>	
				
				<c:forEach begin="1" end="10" varStatus="stat1">
		    		EventManager.addListener(cat1 + ${stat1.index}, "click", function() { custom.selectNews(cat1 + ${stat1.index}); });
		    		
		    		custom.stat1${stat1.index} = tactile.page.getComponent(cat1 + ${stat1.index});
		    	</c:forEach>
		    	
		    	<c:forEach begin="1" end="10" varStatus="stat2">
		    		EventManager.addListener(cat2 + ${stat2.index}, "click", function() { custom.selectNews(cat2 + ${stat2.index}); });
		    		
		    		custom.stat2${stat2.index} = tactile.page.getComponent(cat2 + ${stat2.index});
		    	</c:forEach>
		    	
		    	<c:forEach begin="1" end="10" varStatus="stat3">
		    		EventManager.addListener(cat3 + ${stat3.index}, "click", function() { custom.selectNews(cat3 + ${stat3.index}); });
		    		
		    		custom.stat3${stat3.index} = tactile.page.getComponent(cat3 + ${stat3.index});
		    	</c:forEach>
		    	
		    	<c:forEach begin="1" end="10" varStatus="stat4">
		    		EventManager.addListener(cat4 + ${stat4.index}, "click", function() { custom.selectNews(cat4 + ${stat4.index}); });
		    		
		    		custom.stat4${stat4.index} = tactile.page.getComponent(cat4 + ${stat4.index});
		    	</c:forEach>
				
			} else if(custom.selectedmenu == 'tech') {	
			
				<c:forEach begin="0" end="3" varStatus="techStat">
					<c:forEach begin="1" end="10" varStatus="itemStat">
						custom.techcatalogueview${techStat.index}.remove(custom.stat${techStat.index + 5}${itemStat.index});		 								
					</c:forEach>
				</c:forEach>	
			
				<c:forEach begin="0" end="3" varStatus="techStat">
					<c:forEach begin="1" end="10" varStatus="itemStat">						 	
						var loadedItem${techStat.index + 5}${itemStat.index}  = tactile.FlexItem.cast(custom.newsloader.getComponent(cat${techStat.index + 5} + ${itemStat.index}));												
						
						custom.techcatalogueview${techStat.index}.append(loadedItem${techStat.index + 5}${itemStat.index});
					</c:forEach>
				</c:forEach>
				
				<c:forEach begin="1" end="10" varStatus="stat5">
		    		EventManager.addListener(cat5 + ${stat5.index}, "click", function() { custom.selectNews(cat5 + ${stat5.index}); });
		    		
		    		custom.stat5${stat5.index} = tactile.page.getComponent(cat5 + ${stat5.index});    		    		
		    	</c:forEach>
		    	
		    	<c:forEach begin="1" end="10" varStatus="stat6">
		    		EventManager.addListener(cat6 + ${stat6.index}, "click", function() { custom.selectNews(cat6 + ${stat6.index}); });
		    		
		    		custom.stat6${stat6.index} = tactile.page.getComponent(cat6 + ${stat6.index});
		    	</c:forEach>
		    	
		    	<c:forEach begin="1" end="10" varStatus="stat7">
		    		EventManager.addListener(cat7 + ${stat7.index}, "click", function() { custom.selectNews(cat7 + ${stat7.index}); });
		    		
		    		custom.stat7${stat7.index} = tactile.page.getComponent(cat7 + ${stat7.index});
		    	</c:forEach>
		    	
		    	<c:forEach begin="1" end="10" varStatus="stat8">
		    		EventManager.addListener(cat8 + ${stat8.index}, "click", function() { custom.selectNews(cat8 + ${stat8.index}); });
		    		
		    		custom.stat8${stat8.index} = tactile.page.getComponent(cat8 + ${stat8.index});
		    	</c:forEach>																															
			}																					
			
		}, 2500);
	},
	
	handleReloadError: function(e) {
		alert("Error loading the content: " + e.url + ", message: " + e.status + " " + e.message);
		
		custom.hideReloadLoader();
	}
	
};

tactile.page.onready(custom.init);
